<template>
  <Dialog title="添加商品" :visible.sync="innerVisible">
    <el-row>
      <el-col :span="24">
        <el-row :gutter="15">
          <el-form ref="searchForm" class="el-form-col" :model="search">
            <el-col :span="6">
              <el-form-item prop="manufacturersName">
                <el-input :maxlength="50" clearable placeholder="厂家名称" v-model="search.manufacturersName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="productName">
                <el-input :maxlength="50" clearable placeholder="商品名称" v-model="search.productName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="productNo">
                <el-input :maxlength="50" clearable placeholder="商品编号" v-model="search.productNo"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item prop="bigClassNo">
                <el-select @focus="focusBig"
                           v-model="search.bigClassNo" :loading="bigClassLoading" placeholder="商品大类">
                  <el-option
                    v-for="item in optionsBig"
                    :key="item.value"
                    :label="item.text"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item prop="middleClassNo">
                <el-select @focus="focusMiddle"
                           v-model="search.middleClassNo" :loading="middleClassLoading" placeholder="商品小类">
                  <el-option
                    v-for="item in optionsMiddle"
                    :key="item.value"
                    :label="item.text"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item>
                <el-button :loading="httpLoading" type="primary" @click.prevent="searchFunc">搜索</el-button>
                <el-button @click.prevent="resetFields">重置</el-button>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </el-col>
    </el-row>
    <el-row class="row">
      <el-col :span="24">
        <el-table
          v-loading="httpLoading"
          border
          ref="elTable"
          max-height="500"
          :data="tableData"
          style="width:100%"
          highlight-current-row
          @current-change="handleCurrentChange"
        >
          <el-table-column
            width="35"
            prop="manufacturersName"
            align="center"
          >
            <template slot-scope="scope">
              <el-radio :value="row.productId" :label="scope.row.productId">&nbsp;</el-radio>
            </template>
          </el-table-column>

          <el-table-column
            min-width="120"
            prop="manufacturersName"
            align="center"
            label="厂家名称"
          >
          </el-table-column>

          <el-table-column
            prop="productNo"
            align="center"
            min-width="120"
            label="商品编号">
          </el-table-column>
          <el-table-column
            prop="productName"
            align="center"
            min-width="360"
            label="商品名称">
          </el-table-column>
          <el-table-column
            prop="bigClass"
            align="center"
            min-width="100"
            label="商品大类">
          </el-table-column>
          <el-table-column
            prop="middleClass"
            align="center"
            min-width="100"
            label="商品小类">
          </el-table-column>
          <el-table-column
            prop="standard"
            align="center"
            min-width="100"
            label="规格">
          </el-table-column>
        </el-table>
        <div style="margin-top: 10px;">
          <Pagination class="pull-right" :page="params.pageNum" :perItem="params.pageSize" :totalItem="totalItem"
                      @pagination="selectPage" @sizeChange="handleSizeChange"></Pagination>
        </div>
      </el-col>
    </el-row>
    <div slot="footer" class="dialog-footer">
      <el-button @click.prevent="innerVisible = false">取消</el-button>
      <el-button @click.prevent="submit" type="primary">添加</el-button>
    </div>
  </Dialog>
</template>
<script>
import {merge, alert} from '@/utils'
import Pagination from '@/components/Pagination'
import {mapActions} from 'vuex'

export default {
  components: {
    Pagination
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    // 商品类型
    productType: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      innerVisible: this.visible,
      params: {
        pageSize: 5,
        pageNum: 1
      },
      search: {
        manufacturersName: '',
        productName: '',
        packageName: '',
        productNo: '',
        bigClassNo: '',
        middleClassNo: ''
      },
      totalItem: 0,
      tableData: [],
      tableDataMap: new Map(),
      tableSelectedMap: new Map(),
      selectedRow: this.value,
      httpLoading: false,
      bigClassLoading: false,
      middleClassLoading: false,
      optionsBig: [], // 商品大类
      optionsMiddle: [], // 商品小类,
      row: {}
    }
  },
  watch: {
    visible(val, oldVal) {
      if (val === oldVal) {
        return
      }
      this.innerVisible = val
      this.params = {
        pageSize: this.params.pageSize,
        pageNum: 1
      }
      if (val) {
        this.resetFields()
        this.httpGetPackage()
      }
    },
    innerVisible(val, oldVal) {
      if (val === oldVal) {
        return
      }
      this.$emit('update:visible', val)
    },
    'search.bigClassNo'(val, oldVal) {
      if (val === oldVal) {
        return
      }
      // 清空小类信息
      this.search.middleClassNo = ''
      this.optionsMiddle = []
    }
  },
  methods: {
    resetFields() {
      if (this.$refs.searchForm) {
        this.$refs.searchForm.resetFields()
      }
    },
    // 数据发送
    submit() {
      this.$emit('setProduction', this.row)
      this.innerVisible = false
    },
    // 获取包件
    httpGetPackage() {
      this.tableData = []
      this.httpLoading = true
      return this.$ajax.table('/ms-warehouse-store/product/get-user-productList', this.params).then(response => {
        this.totalItem = response.totalItem
        this.tableData = response.data
      }).finally(_ => {
        this.httpLoading = false
      })
    },
    selectPage(page) {
      this.params.pageNum = page
      this.httpGetPackage()
    },
    searchFunc() {
      this.params = merge(this.params, this.search)
      this.tableSelectedMap = new Map()
      this.selectedRow = []
      this.httpGetPackage()
    },
    handleSizeChange(size) {
      this.params.pageSize = size
      this.httpGetPackage()
    },
    // 获取商品大类
    focusBig() {
      if (this.optionsBig.length === 0) {
        this.bigClassLoading = true
        this.getProductType().then(arr => {
          this.optionsBig = arr
        }).finally(_ => {
          this.bigClassLoading = false
        })
      }
    },
    // 获取商品小类
    focusMiddle() {
      const bigClassNo = this.search.bigClassNo
      if (!bigClassNo) {
        alert('请选择商品大类')
        return
      }
      if (this.optionsMiddle.length === 0) {
        this.middleClassLoading = true
        this.getProductType(bigClassNo).then(arr => {
          this.optionsMiddle = arr
        }).finally(_ => {
          this.middleClassLoading = false
        })
      }
    },
    // 选中一行
    handleCurrentChange(row) {
      if (row) {
        this.row = row
      }
    },
    ...mapActions([
      'getProductType'
    ])
  }
}
</script>
